<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>设置项目基本信息</span>
      </div>
      <el-form ref="formData" :model="formData" label-width="100px">
        <el-form-item label="项目名称">
          <el-input v-model="formData.name" placeholder="项目名称" />
        </el-form-item>
        <el-form-item label="项目地址">
          <el-input v-model="formData.address" placeholder="项目地址" />
        </el-form-item>
        <el-form-item label="项目实景">
          <ImgUpload
            name="project"
            :image-url="imageUrl"
            @onSuccess="onSuccess"
            @beforeUpload="beforeUpload"
          />
        </el-form-item>
        <el-form-item label="项目介绍">
          <el-input v-model="formData.descri" rows="4" type="textarea" placeholder="项目介绍" />
        </el-form-item>
        <el-divider>地图显示设置</el-divider>
        <el-form-item label="地图选择">
          <el-select v-model="formData.map" placeholder="选择载入地图" clearable filterable>
            <el-option
              v-for="(item,index) in maps"
              :key="index"
              :label="item.name"
              :value="item.namekey"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="缩放比例">
          <el-slider
            v-model="formData.maplevel"
            :min="minZoom"
            :max="maxZoom"
            show-input
          />
        </el-form-item>
        <el-form-item label="中心位置">
          <el-input v-model="formData.latlng" :disabled="true" placeholder="地图中心点位置经纬度" class="input-with-select">
            <el-button slot="append" icon="el-icon-s-promotion" @click="openPoiContainer">选择所在位置</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="描绘地块边界">
          <el-button icon="el-icon-edit" type="primary" @click="openDraw">描绘地块边界</el-button>
        </el-form-item>
        <el-form-item label="地块kml信息">
          <el-input v-model="formData.kml" type="textarea" rows="4" placeholder="地块kml信息" class="input-with-select" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-dialog
      title="选择所在位置"
      :visible.sync="dialogVisible"
      modal-append-to-body
      append-to-body
      fullscreen
    >
      <location ref="mark" :map-data="mapData" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setPoi">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="规划地块kml信息"
      :visible.sync="dialogDrawVisible"
      modal-append-to-body
      append-to-body
      fullscreen
    >
      <draw :center="mapData.center" @drawFinish="drawFinish" />
    </el-dialog>
  </div>
</template>

<script>
import ImgUpload from '@/components/ImgUpload'
import Location from '@/components/Location'
import Draw from './component/draw'
import { updateOne } from '@/api/project'
import { maps } from '@/utils/constant'
import UploadMixin from '@/mixin/UploadMixin'
import { mapGetters } from 'vuex'
export default {
  components: {
    ImgUpload,
    Location,
    Draw
  },
  mixins: [UploadMixin],
  data() {
    return {
      maps,
      dialogImageUrl: '',
      dialogVisible: false,
      dialogDrawVisible: false,
      minZoom: 3,
      maxZoom: 18,
      formData: {},
      mapData: {
        center: [39.460508, 115.851289],
        zoom: 18
      }
    }
  },
  computed: {
    ...mapGetters(['project'])
  },
  created() {
    this.initial()
  },
  methods: {
    initial() {
      this.formData = this.project
      this.formData.maplevel = parseInt(this.formData.maplevel)
      this.formData.center = [this.formData.lat, this.formData.lng]
      this.formData.latlng = this.formData.center.join(',')

      this.mapData = {
        center: this.formData.center,
        zoom: this.formData.maplevel
      }
    },
    async onSubmit() {
      const { data, msg } = await updateOne(this.formData.id, this.formData)
      this.$store.commit('device/SET_PROJECT', data)
      this.$message({ message: msg, type: 'success', showClose: true })
    },
    openPoiContainer() {
      this.dialogVisible = true
    },
    setPoi() {
      const gps = this.$refs.mark.getLocation()

      this.formData.lat = gps.lat.toFixed(6)
      this.formData.lng = gps.lng.toFixed(7)
      this.formData.center = [this.formData.lat, this.formData.lng]
      this.formData.latlng = this.formData.center.join(',')

      this.dialogVisible = false
    },
    openDraw() {
      this.dialogDrawVisible = true
    },
    drawFinish(latlngs) {
      this.formData.kml = latlngs
      this.dialogDrawVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
